/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view class="content">
		<app-head bg="#ff3b3b"></app-head>
		<!-- #ifndef Mp -->
		<view class="search-box ">
			<view class="search-inner">
				<view class="search-img"><image class="wh100" :src="imgUrl+'common/search.png'"></image></view>
				<input class="search-cont" placeholder="请输入您所搜索的商品" type="text" @tap="jumpSearch"/>
			</view>
		</view>
		<!-- #endif-->
		<!--  #ifdef MP -->
		<view class="search-box" >
			<view class="headBox"  :style="{height:navHeight+'px'}"></view>
			<view class="search-inner">
				<view class="search-img"><image class="wh100" :src="imgUrl+'common/search.png'"></image></view>
				<input class="search-cont" placeholder="请输入您所搜索的商品" type="text" @tap="jumpSearch"/>
			</view>
		</view>
		<!-- #endif -->
		<!-- banner背景 -->
		<view class="finde_man"></view>
		<!-- 轮播图 -->
		<!-- #ifndef MP -->
		<view class="bannerBox">
			<banner></banner>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP -->
		<view class="bannerBox" :style="{marginTop:BannerTop+'px'}">
			<banner></banner>
		</view>
		<!-- #endif -->
		<!-- 导航栏 -->
		<index-nav></index-nav>
		<!-- 秒杀 -->
		<view  class="seckill" v-if="seckill.length>0">
			<view class="seckill-time">
				<view class="classname">
					<view class="sk-tips"><image  :src="imgUrl+'index/s2.png'"></image></view>
					<view class="sk-time sk-tit">{{session}}点场</view>
					<view class='time-n'>
						<view class="sk-time skt-pub">{{hou?hou:"00"}}:</view><view class="sk-time skt-pub">{{min?min:"00"}} :</view><view class="sk-time">{{sec?sec:'00'}}</view>
					</view>
				</view>
				<navigator url="/pages/active/seckill_list/seckill_list"><image class="sk-pic" :src="imgUrl+'index/s.png'"></image> 更多</navigator>
			</view> 
			<view class="seckill-list">
				<block v-for="(item,index) in seckill">
					<navigator :url="'/pages/goods/goodsInfo/goodsInfo?goods_id='+item.goods_id+'&item_id='+item.item_id">
						<image  :src="hostUrl+'/mall/goods/thumb_image?goods_id='+ item.goods_id+'&width='+goodsImgWidth+'&height='+goodsImgHeight+'&'+item.goods_id+'.'+imgType"></image>
						<view class='goods_name'>{{item.goods_name}}</view> 
						<view class='smj' style=''>¥</view>
						<view class="co-red">{{item.price}}</view>
						
						<view class='s-vol'>{{item.shop_price}}</view>
					</navigator>
				</block>
			</view>
		</view>
		<view class="without" v-else>
		        <!-- <text>暂无秒杀商品~</text> --> 
			<image class="imh_ima" :src="imgUrl+'index/mszc.png'"></image>
			<navigator class="imh_img" url="/pages/active/seckill_list/seckill_list">
				<image :src="imgUrl+'index/icon_flash_sale.png'"></image>
				 限时抢购
			</navigator>
		</view>  
		<!-- 广告图 -->
		<view  class='hpics' >
			<block v-for="(item,index) in adList" :key="index">
				<navigator  :url='item.ad_link' class='f-classify-s' v-if="index<4">
					<image mode='aspectFill' :src='hostUrl+item.ad_code' ></image>
				</navigator>
			</block>
			
		</view>
		<!-- 广告图2 -->
		<block v-for="(item,index) in adList" :key="index">
			<navigator :url='item.ad_link' class='f-classify-b' v-if="index==5">
				 <image mode='aspectFill' :src="hostUrl+item.ad_code" ></image>
			</navigator>
		</block>
		<!-- 广告图end -->
		<!-- 热销商品 -->
		<hot-goods></hot-goods>
		<!-- 推荐商品 -->
		<feature></feature>
		<!-- 拼团列表 -->
		<spell-group></spell-group>
		<view class='newcomers' catchtouchmove="return" v-if="newcomers" >
			<view class='newcomers-tec'>
			  <image class='new-img' :src="imgUrl+'index/hongbao-1.png'"></image>
			  <view class='newcomers-text'>
				<view class='text-auto'>
				  <view  class='text-an'>
					<text data-id="item.id" class='text-an2'>￥<text class='text-an3'>{{newcomersData[index].money}}</text>元新人红包</text>
				  </view>
				</view>
				<image @tap='newdax' class='new-img3' :src="imgUrl+'index/button-1.png'"></image>
			  </view>
			  <image class='dax-1' @tap='daxhide' :src="imgUrl+'index/dax-1.png'"></image>
			</view>
		  </view>
	</view>
</template>

<script>
	import appHead from "@/components/app-head/app-head";
	import Banner from "@/components/banner/banner.vue";
	import IndexNav from "@/components/indexNav/index-nav.vue";
	import HotGoods from "@/components/hotGoods/hotgoods.vue";
	import Feature from "@/components/feature/feature.vue";
	import SpellGroup from "@/components/spellGroup/spellGroup.vue";
	import {getAd,getSeckill,getNewcomers,postCoupon} from "@/api/api.js";
	import {mapState,mapMutations} from "vuex";
	import config from "@/api/config.js";
	import common from "@/common/common.js";
	export default {
		components:{
			Banner,
			IndexNav,
			HotGoods,
			Feature,
			SpellGroup,
			appHead
		},
		data() {
			return {
				hostUrl:config.host,//路径前缀
				imgUrl:config.imgUrl,//图片资源前缀
				loginInfo:uni.getStorageSync('loginInfo') || null,//登录信息
				adList:"",//广告图list
				seckill:"",//秒杀list
				roundtime:"",//秒杀倒计时结束时间
				session:"12",//秒杀场次 
				day:'',
				hou:'',
				min:'',
				sec:'',
				index:0,//新人优惠劵 返回数组，默认取0
				pid:1,//广告id
				newcomers:false,//新人红包
				newcomersData:"",
				start_time:"",//秒杀初始时间
				end_time:"",//秒杀结束时间
				BannerTop:""
				
			}
		},
		computed: {
			...mapState(['hasLogin','navHeight','navTop','imgType','goodsImgHeight','goodsImgWidth'])
		},
		onLoad() {
			this._getAd()
			this.getime()
			// console.log(this.navHeight)
			setTimeout(()=>{
				let that=this;
				let height="";
				let result;
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.search-box').boundingClientRect(data => {
					if(data.length>0){
						data.forEach(item=>{
							console.log(item)
							height=item.height
							
						})
						
					   that.BannerTop=height//20是左右padding的总和
					  
					
					}
				}).exec(); 
			},300)
			// this._getSeckill()
		},
		onShow(){
			
			if(this.hasLogin){
				this._getNewcomers()
			}
		},
		methods: {
		
			_getAd(){/*获取banner*/
				getAd().then(res=>{
					console.log(res)
					this.adList=res.records
				})
			},
			_getSeckill(){/*获取秒杀列表*/
				
				let params={
					"recommend":1,//首页
					"size":"3",
					"start_time":this.start_time,//偶数级时间例如 12,16
					"end_time":this.end_time,
				}
				
				
				getSeckill(params).then(res=>{
					console.log(res)
					if(res.records.length>0){
						this.seckill=res.records;
						this.secondKill()  
					}
					
					
					
				})
			}, 
			secondKill(){
				clearInterval(timer); 
				let timer = setInterval(this.getTime, 1000) 
				
			}, 
			getTime(){
				var that=this;
				var timestamp=parseInt(new Date().getTime()/1000);/*当前时间*/
				let endTime = this.seckill[0].end_time /*默认取第一个倒计时结束时间*/
				let endTimeList =[] //结束时间list 
				// 1576063260524   1576116043
				if(endTime - timestamp>0){
					let time = (endTime - timestamp);
					var day = parseInt(time / (60 * 60 * 24));
					var hou = parseInt(time % (60 * 60 * 24) / 3600);
					var min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
					var sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
					if(hou<10){
						hou="0"+hou
						
					}
					that.hou=hou
					if(min<10){
						min="0"+min 
						
					}
					that.min=min
					if(sec<10){
						sec="0"+sec
						
					}
					that.sec=sec
					
				}else{
					that.day="00";
					that.hou="00";
					that.min="00";
					that.sec="00";
				}
			} ,
			/*获取当前时间戳*/
			getime(){
				var t = new Date();
					var time = parseInt(t.getTime()/1000);//当前时间
					
					var now=common.format(time) //转换后的时间   2020-01-13 18:00:00
					var num=now.indexOf(":");
					var sub=now.substring(0, num)
					
					var sublsat=sub.substring(sub.length-2) //后两位数
					if(parseInt(sublsat%2) !=0){ //获取准点场次
						sublsat=sublsat-1
					}
					this.session=sublsat
					// console.log(sub,sub1)
					var parameter=sub.replace(sub.substring(sub.length-2),sublsat) + ":00:00";
					console.log(parameter)
					var date=new Date(parameter).getTime();
					this.start_time=parseInt(date/1000)
					this.end_time=this.start_time+7200
					
				
			},
			/*新人专享红包*/
			_getNewcomers(){
				getNewcomers().then(res=>{
					
					if(res.length>0){
						this.newcomers=true;
						this.newcomersData=res;
					}
					
				})
			},
			jumpSearch(){
				uni.navigateTo({
					url:"/pages/goods/search/search"
				})
			},
			/*领取新人优惠劵*/
			newdax(){
				let params={
					cid:this.newcomersData[this.index].id
				}
				this._postCoupon(params)
			},
			_postCoupon(params){
				postCoupon(params).then(res=>{
					console.log(res)
				})
			},
			/*关闭*/ 
			daxhide(){
				this.newcomers=false;
			}
			
		}
	}
</script> 

<style lang="scss">
	page{
		display: flex;
		flex-direction: column;
		height: 100%;
		width: 100%;
		
	}

	.bannerBox{
		height: 340rpx;
	}
	.content{
		flex: 1;
		height: auto;
		background: $page-bg-color;
		padding-bottom: 120rpx;
	}
	/*搜索栏start*/
	.search-box{
		position: fixed;
		top: 0;
		left: 0;
		//#ifdef APP-PLUS
		top: var(--status-bar-height); 
		// #endif
		//#ifdef H5
		top: 0rpx;
		//#endif
		width: 100%;
		//#ifdef H5
		height:auto;
		//#endif
		
		z-index: 10;
		background: $page-bg-color-master;

	}
	
	.search-inner{
		display: flex;
		align-items: center;
		margin: 15rpx 20rpx;
		width: 710rpx;
		height: 60rpx;
		border-radius: 30rpx;
		background-color: #fefdfd;

	}
	.search-img{
		margin-right: 12rpx;
		width: 28rpx;
		height: 28rpx;
		margin-top: 0rpx;
		margin-left: 40rpx;
		.wh100{
			display: block;
			width: 100%;
			height: 100%;
		}
	}
	.search-cont{
		height: 58rpx;
		width: 536rpx;
		padding-left: 12rpx;
		line-height: 60rpx;
		font-size: 24rpx;
		color: $text-color-minor;

	}
	/*banner背景色start*/
	.finde_man{
		background: $page-bg-color-master;
		position: absolute;
		top: 0;
		width: 100%;
		left: 0;
		height: 278rpx;

	}
	/*banner背景色end*/ 
	/*秒杀商品start*/
	.seckill {
	    margin: 0 auto;
	    margin-top: 20rpx;
	    background-color:$page-bg-color;
	    padding-bottom:0rpx;
	    border-radius: 10rpx;
	    width: 710rpx;
	    overflow: hidden;
	}
	.seckill-time:after{
	    content: '';
	    display:inline-block;
	    width: 12rpx;
	    height: 12rpx;
	    border-top: 2rpx solid $cut-bg-color;
	    border-right: 2rpx solid $cut-bg-color;
	    transform: rotate(45deg);
	}
	.seckill-time {
	    display:flex;
	    justify-content:space-between;
	    padding:5rpx 20rpx;
	    align-items:center;
	    height:100rpx;
	    color:$text-color;
	    background: $index-bg-color;
	    width: 710rpx;
	    box-sizing: border-box;
	    margin: 0 auto;
	    border-bottom: 1px solid $cut-bg-color;
	}
	.classname {
	    height:70rpx;
	    margin-right:22rpx;
	    padding-top:40rpx;
	}
	.classname view{
	    float: left;
	}
	.sk-tips{
	    width:120rpx;
	    height:30rpx;
	    margin-right:20rpx;
	    margin-top:-1rpx;
		image{
			width:120rpx;
			height:30rpx;
		}
	}
	.sk-tit {
	    background-color:$page-bg-color-master;
	    color:$text-color-white;
	    padding:0 10rpx;
	    height:32rpx !important;
	    line-height:32rpx !important;
	}
	.sk-time {
	    position:relative;
	    display:inline-block;
	    font-size:22rpx;
	    text-align:center;
	    /* height:28rpx;
	    line-height:28rpx; */
	}
	.time-n {
	    border:1rpx solid $cut-bg-color-master;
	    color:$text-color-master;
	    padding:0 10rpx;
	    height: 32rpx;
	    line-height: 32rpx;
	    box-sizing: border-box;
	}
	.time-n view{
	    min-width: 28rpx;
	    font-weight: 600;
	}
	.skt-pub{
	    margin-right: 10rpx;
	}
	.seckill-time>navigator{
	    font-size:24rpx;
	    margin-right:-200rpx;
	}
	.sk-pic{
	    width: 28rpx;
	    height: 28rpx;
	    vertical-align: top;
	}
	.seckill-list {
	    height:330rpx;
	    background-color:$page-bg-color;
	    white-space: nowrap;
	    width: 710rpx;
	    margin: 0 auto;
	    overflow: hidden;
	    background: $index-bg-color;
	    padding-top: 20rpx;
	}
	.seckill-list navigator{
	    width:230rpx;
	    background-color:$index-bg-color;
	    overflow:hidden;
	    margin-left:10rpx;
	    display: inline-block;
	    border-radius: 10rpx;
	}
	.seckill-list navigator:first-child{
	  margin-left: 0rpx;
	}
	.seckill-list image{
	    width: 240rpx;
	    height: 240rpx;
	    border-radius: 10rpx;
	}
	.seckill-list view{
	    height:40rpx;
	    padding:0 10rpx;
	    line-height:40rpx;
	    overflow:hidden;
	    font-size:22rpx;
	    font-weight:600;
	}
	.seckill-list .goods_name{
	    color: $text-color; 
	    font-weight: 500;
	}
	.smj{
	    min-width:5rpx;
	    float:left;
	    padding:0!important;
	    color:$text-color-master;
	    font-size:20rpx !important;
		margin:0rpx 5rpx 0rpx 15rpx;
	}
	.co-red{
	    min-width:5rpx;
	    font-size:26rpx!important;
	    font-weight:bold;
	    float:left;
	    padding:0!important;
		color: $text-color-master;
	}
	.s-vol {
	    float:left;
	    color:$text-color-hint;
	    text-align:right;
	    font-weight: 500 !important;
	    text-decoration:line-through;
	}
	/*秒杀商品end*/
	/*无秒杀商品start*/ 
	.without{
		padding: 0 20rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: $index-bg-color;
		margin: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 0;
		.imh_ima{
			width: 167rpx;
			height: 55rpx;
			display: inline-block;
			vertical-align: middle;
		}
		.imh_img{
			float: right;
			font-size: 24rpx;
			color: $text-color-hint;
			position: relative;
			line-height: 100rpx;
			image{
				width: 30rpx;
				height: 31rpx;
				margin-right: 20rpx;
				position: absolute;
				top: 35rpx;
				left: -40rpx;

			}
		}
	}
	/*无秒杀商品end*/
	/*广告图1start*/
	.hpics{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 20rpx 20rpx 0;
		
		.f-classify-s{
			width: 350rpx;
			height: 150rpx;
			
			margin-bottom: 10rpx;
			border-radius: 10rpx;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	/*广告图1end*/
	/*广告图2start*/
	.f-classify-b{
		width: 710rpx;
		border-radius: 10rpx;
		overflow: hidden;
		height: 188rpx;
		margin-bottom: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		image{
			width: 100%;
			height: 100%;
			display: inline-block;
			overflow: hidden;

		}
	} 
	/* 新人专享好礼 */
	.newcomers{
	  position: fixed;
		top: 0;
		width: 100%;
		bottom: 0;
		background: rgba(0, 0, 0, 0.2);
		z-index: 999;
	  display: block;
	}
	.newcomers .newcomers-tec{
	  position: relative;
	}
	.newcomers .new-img{
	  width: 549rpx;
	  height: 607rpx;
	  margin: 0 auto;
	  display: block;
	  margin-top: 170rpx;
	}
	.newcomers .newcomers-text{
	  position: absolute;
	  top: 290rpx;
	  width: 100%;
	}
	.newcomers .newcomers-text .text-auto{
	  height: 214rpx;
	}
	.newcomers .newcomers-text .text-an{
	  width: 430rpx;
	  height: 92rpx;
	  background: #f5d36a;
	  border-radius: 10rpx; 
	  margin: 0 auto;
	  display: flex;
	  align-items: center;
	  margin-bottom: 15rpx;
	}
	.newcomers .newcomers-text .text-an2{
	  width: 416rpx;
	  height: 80rpx;
	  text-align: center;
	  line-height: 80rpx;
	  margin: 0 auto;
	  color: #ff3b3b;
	  border: 1rpx solid #ff3b3b;
	  font-size: 30rpx;
	  border-radius: 10rpx;   
	}
	.newcomers .newcomers-text .text-an3{
	  font-size: 48rpx;
	  margin: 0 15rpx;
	}
	.newcomers .newcomers-text .new-img3{
	  width: 256rpx;
	  height: 82rpx;
	  margin: 0 auto;
	  display: block;
	}
	.newcomers .dax-1{
	  width: 58rpx;
	  height: 58rpx;
	  display: block;
	  margin: 0 auto;
	  margin-top: 57rpx;
	}
</style>
